<template>
	<view>
		<uni-nav-bar :shadow="false" leftText="返回" left-icon="left" title="楼长" right-icon="right" @clickRight="go" @clickLeft="back" :border="false" />


		<view class="chat-container">
			<view class="chat_content">
				<!-- 左边 -->
				<view class="content_text1">
					<image src="@/static/logo.png" mode=""></image>
					<image src="@/static/logo1.jpg" mode=""></image>
				</view>
				<!-- 时间 -->
				<view class="time">06-24 10:26</view>
				<!-- 时间 -->
				<view class="content_text2">
					<image src="@/static/logo.png" mode=""></image>

					<view class="content_text2_box">
						<view class="text">小别墅面积72-94m</view>
						<view class="text">赠送花园40m大露台 总价176碗/套起</view>
						<view class="text">现房，现房</view>
					</view>
					<i class="iconfont icon-zuosanjiao"></i>
				</view>
				<!-- 3 -->
				<!-- 左边 -->
				<view class="content_text3">
					<image src="@/static/logo.png" mode=""></image>
					<image src="@/static/logo1.jpg" mode=""></image>
				</view>
				<!-- 右边 -->
				<view class="content_right">
					<i class="iconfont icon-yousanjiao"></i>
					<view class="right_text1">已读</view>
					<view class="right_text2">你们不是海口</view>
					<image src="@/static/tx.png" mode=""></image>
				</view>
				<view class="content_right2">
					<i class="iconfont icon-yousanjiao"></i>
					<view class="right_text1">已读</view>
					<view class="right_text2">有海口经销商电话吗</view>
					<image src="@/static/tx.png" mode=""></image>

				</view>
				<!-- 右边 -->
			</view>
			<!-- 输入框 -->
			<view class="input-container">
				<uni-icons custom-prefix="iconfont" type="icon-yuyin" size="48rpx"></uni-icons>
				<input class="input" />
				<uni-icons custom-prefix="iconfont" type="icon-biaoqing" size="48rpx"></uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-jiahao" size="48rpx"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			go(){
				uni.navigateTo({
					url:'/pages/chatDetails/chatDetails'
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}

	}
</script>

<style lang="less">
	page {
		margin: 0;
		padding: 0;
		background-color: #e7ebee;
	}
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f0f0f0;
		position: relative;
		// 聊天页面
		.chat_content {
			width: 92%;
			height: 100%;
			margin: 0 auto;

			/* 左边 */
			.content_text1 {
				display: flex;
				margin-top: 173rpx;

				image:nth-child(1) {
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
				}

				image:nth-child(2) {
					width: 310rpx;
					height: 210rpx;
					margin-left: 20rpx;
				}
			}

			/* 时间 */
			.time {
				width: 160rpx;
				height: 40rpx;
				background-color: #c7cacd;
				font-size: 20rpx;
				color: white;
				text-align: center;
				line-height: 40rpx;
				margin: 0 auto;
				margin-top: 55rpx;
				border-radius: 7rpx;
			}

			/* 时间 */
			.content_text2 {
				display: flex;
				margin-top: 25rpx;
				position: absolute;

				image {
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
				}

				.content_text2_box {
					width: 520rpx;
					font-size: 28rpx;
					line-height: 50rpx;
					background-color: white;
					margin-left: 20rpx;
					border-radius: 7rpx;

					.text {
						margin-left: 24rpx;
						margin-top: 10rpx;
					}
				}

				i {
					position: relative;
					color: #fff;
					top: 22rpx;
					left: -538rpx;
				}
			}

			/* 3 */
			.content_text3 {
				display: flex;
				margin-top: 255rpx;

				image:nth-child(1) {
					width: 75rpx;
					height: 75rpx;
					border-radius: 50%;
				}

				image:nth-child(2) {
					width: 175rpx;
					height: 310rpx;
					margin-left: 20rpx;

				}
			}

			/* 右边 */
			.content_right {
				display: flex;
				height: 75rpx;
				margin-left: 310rpx;
				margin-top: 35rpx;
				position: absolute;

				i {
					position: relative;
					top: 22rpx;
					right: -268rpx;
					color: #60c696;
				}

				.right_text1 {
					font-size: 20rpx;
					color: #999;
					margin-top: 40rpx;
				}

				.right_text2 {
					width: 200rpx;
					background-color: #60c696;
					border-radius: 7rpx;
					color: #fff;
					line-height: 75rpx;
					text-align: center;
					margin-left: 5rpx;
					font-size: 28rpx;

				}

				image {
					width: 75rpx;
					height: 75rpx;
					margin-left: 20rpx;
					border-radius: 50%;
				}
			}

			/* 2 */
			.content_right2 {
				display: flex;
				height: 75rpx;
				margin-left: 215rpx;
				margin-top: 140rpx;
				position: absolute;
				padding-bottom: 200rpx;

				i {
					position: relative;
					top: 22rpx;
					right: -368rpx;
					color: #60c696;
				}

				.right_text1 {
					font-size: 20rpx;
					color: #999;
					margin-top: 40rpx;
				}

				.right_text2 {
					width: 300rpx;
					background-color: #60c696;
					border-radius: 7rpx;
					color: #fff;
					line-height: 75rpx;
					text-align: center;
					margin-left: 5rpx;
					font-size: 28rpx;

				}

				image {
					width: 75rpx;
					height: 75rpx;
					margin-left: 20rpx;
					border-radius: 50%;
				}
			}

		}

		// 输入框
		.input-container {
			width: 100%;
			height: 114rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #f3f4f6;
			border-top: 1rpx solid #ddd;
			position: fixed;
			bottom: 0;

			.input {
				flex: 1;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
				background-color: #ffffff;
			}
		}
	}
</style>